<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>用户中心</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/apiStyle.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">


</head>

<body class="sticky-header">
<div id="app">

    <!--Start left side Menu-->
    <div id="nav-api" class="left-side sticky-left-side" style="background-color: #B11E22">
    </div>
    <!--End left side menu-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <!--<script src="assets/js/commonPage/header.js"></script>-->
        <div class="header-section">

            <a class='toggle-btn'><i class='fa fa-bars'></i></a>

            <!--notification menu start -->
            <div class='menu-right'>
                <ul class='notification-menu'>
                    <li>
                        <a href='#' class='btn btn-default dropdown-toggle info-number' data-toggle='dropdown'>
                            <i class='fa fa-history'></i>
                            <!--<span class='badge'>6</span>-->
                        </a>
                        <div class='dropdown-menu dropdown-menu-head pull-right'>
                            <h5 class='title'>只显示最多5条记录</h5>
                            <ul class='dropdown-list'>
                                <li class='notification-scroll-list notification-list '>
                                    <!-- list item-->
                                    <a href='' class='list-group-item' v-for="(item,index) in history.slice(0,5)">
                                        <div class='media'>
                                            <div class='pull-left p-r-10'>
                                                <em class='fa fa-shopping-cart noti-primary'></em>
                                            </div>
                                            <div class='media-body'>
                                                <h5 class='media-heading'>{{item.name}}</h5>
                                                <p class='m-0'>
                                                    <small>{{item.timeDiff}}</small>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class='last'><a href='history.html'>查看所有足迹</a></li>
                            </ul>
                        </div>
                    </li>

                    <!--<li>
                        <a href='#' class='btn btn-default dropdown-toggle info-number' data-toggle='dropdown'>
                            <i class='fa fa-bell-o'></i>
                            <span class='badge'>6</span>
                        </a>
                        <div class='dropdown-menu dropdown-menu-head pull-right'>
                            <h5 class='title'>Notifications</h5>
                            <ul class='dropdown-list normal-list'>
                                <li class='message-list message-scroll-list'>
                                    <a href='#'>
                                    <span class='photo'> <img src='assets/images/avatar/name'
                                                              class='img-circle' alt='img'></span>
                                        <span class='subject'>石头记</span>
                                        <span class='message'> New tasks needs to be done</span>
                                        <span class='time'>15 minutes ago</span>
                                    </a>
                                </li>
                                <li class='last'><a href='#'>All Messages</a></li>
                            </ul>
                        </div>
                    </li>-->
                    <li>
                        <a href='#' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>
                            <img src='assets/images/avatar/1610176679728.jpg' alt=''/>
                            {{user.userName}}
                            <span class='caret'></span>
                        </a>
                        <ul class='dropdown-menu dropdown-menu-usermenu pull-right'>
                            <!--<li><a href='#'> <i class='fa fa-wrench'></i> uff </a></li>-->
                            <li><a href='user.html'> <i class='fa fa-user'></i> 个人中心 </a></li>
                            <li><a href='history.html'> <i class='fa fa-info'></i> 我的足迹 </a></li>
                            <li><a href='#' @click="loginout"><i class='fa fa-lock'></i> 退出登录 </a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!--body wrapper start-->
        <div class="wrapper" id="wrapper" style="background-color: white">

            <!--Start row-->
            <div class="row">
                <div class="col-md-12">
                    <div class="white-box">
                        <h2 class="header-title">修改个人信息</h2>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="userName">用户名</label>
                                <div class="col-md-10">
                                    <input class="form-control" id="userName" v-model:value="user.userName" type="text"
                                           required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="email">邮箱</label>
                                <div class="col-md-10">
                                    <input id="email" name="email" class="form-control"
                                           placeholder="Email" type="email" v-model:value="user.email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="phone">电话</label>
                                <div class="col-md-10">
                                    <input class="form-control" id="phone" v-model:value="user.phone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="age">年龄</label>
                                <div class="col-md-10">
                                    <input class="form-control" id="age" v-model:value="user.age">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="sex">性别</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="sex" v-model="user.sex">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary col-lg-offset-10" @click="updateUser">提交
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <!--End row-->
        </div>
        <!-- End Wrapper-->

        <!--Start  Footer -->
        <footer id="apiFooter" class="footer-main"></footer>
        <!--End footer -->

    </div>
    <!--End main content -->
</div>
<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<!--  vue  -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/js/util/http-util.js"></script>
</body>
<script>
    $(function () {
        // $('#header').load('header.html');
        $('#apiFooter').load('apiFooter.html');
        $('#nav-api').load('nav-api.html');
    })
</script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            history: [],
            user: []
        },
        computer: {},
        methods: {
            show: function () {
                let thisObj = this;
                /*let thisObj = this;
                thisObj.user=getSelection();
                console.log(thisObj.user)*/
                let url = "/shop_api/show";
                doGet(url, function () {
                });
                console.log(thisObj.history.viewTime)
            },
            test: function () {
                let thisObj = this;
                let url = "/shop_api/getHistory";
                doGet(url, function (resp) {
                    console.log("get history");
                    thisObj.history = resp;
                    console.log(thisObj.history);
                })
            },
            getHistory: function () {
                let thisObj = this;
                let url = "/shop_api/getHistory";
                doGet(url, function (resp) {
                    console.log("get history");
                    thisObj.history = resp;
                    console.log(thisObj.history);
                })
            },
            getUser: function () {
                let thisObj = this;
                let url = "/shop_api/getUser";
                doGet(url, function (resp) {
                    thisObj.user = resp;
                })
            },
            loginout: function () {
                let url = "/shop_api/loginpassout";
                doGet(url, function () {
                    location.href = "../view_api/loginpass.html";
                    alert("退出登录成功");
                });
            },
            updateUser: function () {
                let thisObj = this;
                let url = "/shop_api/updateUser";
                let params = {
                    id: thisObj.user.id,
                    userName: thisObj.user.userName,
                    phone: thisObj.user.phone,
                    email: thisObj.user.email,
                    age: thisObj.user.age,
                    sex: thisObj.user.sex,
                };
                doPost(url, params, function () {

                });
            }
        },
        mounted: function () {
            this.getHistory();
            this.getUser();
        }
    })
</script>
</html>

